<template>
  <view :class="$style.container" class="flex flex-col">
    <view class="flex justify-between items-center">
      <view :class="$style.title">{{ titleName }}</view>
      <view :class="$style.rank">{{ responseData.text }}</view>
    </view>

    <!-- <view class="flex" style="margin-top: 30rpx; margin-left: 40%;">
      <view class="flex-col-center">
        <view>
          <text :class="$style.time">
            {{ responseData.responseTime }}
          </text>
          <text :class="$style.unit">秒</text>
        </view>
        <view :class="$style.text">响应时长</view>
      </view>

      <view class="flex" style="margin-top: 10rpx">
        <image :src="imgUrl" mode="widthFix" style="width:74rpx; height: 40rpx;"></image>
        <view :class="$style.decrease">
          <text>{{ responseData.relative }}</text>
          <text>秒</text>
        </view>
      </view>
    </view> -->

    <view class="flex justify-around" style="margin-top: 25rpx">
      <view v-for="(item, index) in statisticData" :key="index" :class="$style.content">
        <view class="flex">
          <view class="flex-col-center">
            <view>
              <text :class="$style.time">{{ item.time }} </text>
              <text :class="$style.unit">秒</text>
            </view>
            <view :class="$style.text">{{ item.title }}</view>
          </view>

          <view class="flex items-center" style="height: 28rpx">
            <image :src="imgUrl" mode="widthFix" style="width:38rpx; height: 20rpx;"></image>
            <view :class="$style.decrease">
              <text :class="$style.decrease">{{ item.relative }}</text>
              <text>秒</text>
            </view>
          </view>
        </view>
      </view>

    </view>

  </view>
</template>

<script setup lang='ts'>

import { ref } from "vue";
import { onMounted } from "@vue/runtime-core";


const imgUrl: string = 'http://192.168.3.210:8380/file-service/file/view//miniprogram/profiledecrease1534360359475871744.png'
onMounted(() => { });
let responseData = ref<any>({
  text: "你的响应速度在单位位列第一",
  responseTime: 38,
  relative: 2,
  policeTime: 11,
  dispatchTime: 27,
});

let statisticData = ref<any>([
  { time: 11, title: "接警时长", relative: 2 },
  { time: 27, title: "出动时长", relative: 2 },
]);

const titleName = ref<string>("本月平均响应速度");
</script>

<style lang='less' module>
.container {
  margin: 20rpx 20rpx 20rpx;
  // height: 300rpx;
  background: #ffffff;
  box-shadow: 0px 4px 19px 1px rgba(51, 51, 51, 0.2);
  border-radius: 20px;
  padding: 10rpx 20rpx;
  font-family: Microsoft YaHei;
  color: #333333;

  .title {
    height: 30rpx;
    font-size: 30rpx;
    font-weight: bold;
  }

  .rank {
    font-weight: bold;
    color: #ff3333;
    font-size: 28rpx;
  }

  .time {
    font-size: 40rpx;
    font-family: Digital;
    font-weight: 400;
  }

  .decrease {
    font-size: 30rpx;
    font-family: Digital;
    font-weight: 400;
    color: #999999;
    margin-left: 5rpx;
  }

  .text {
    font-size: 28rpx;
    color: #375ce4;
    font-weight: bold;
  }

  .unit {
    font-size: 32rpx;
  }

  .content {
    padding: 20rpx 50rpx;
    background: rgba(153, 153, 153, 0.1);
    border-radius: 50rpx;
  }
}
</style>
